<template>
    <div>
        <navBar :navTitle="$t('Souuo')" />
        <div class="full-width"> 
            <van-search v-model="listed_obj.where" :placeholder="$t('Mingchengdaima')"  @search="fnSearch" class="index-search"/>
        </div>
        <div class="full-width92">
            <div class="flex-between">
                <div class="font12  color-gray">{{$t('Sousuolishi')}}</div>
                <van-icon name="delete-o" @click="fnRemoveHistory" />
            </div>
            
            <div class="addStock-history">
                <div v-if="addWordArr.length > 0">
                    <span class="bg-gray bg-span" v-for="(item, index) in  addWordArr" :key="index"
                                   @click="fnAddStock(item)">{{item}}</span>
                </div>
                <div v-else class="color-gray font12">{{ $t('Meiyousousuo') }}</div>
       
            </div>
    
            <div class="addStock-title  color-gray">{{ $t('Gupiaoleibie') }}</div>
        </div>
       
        <van-list
            v-model="listed_loading"
            :finished="listed_finished"
            finished-text=""  :loading-text="$t('Jiazai')"
            :immediate-check = "false"
            @load="fnLoadListed"
            class="addStock-van-list listed-van-list">
            <main class="listed-ul">
                <van-row v-for="(item, index) in listed_arr" :key="index" class="listed-list full-width92"
                         @click="fnGoMarketInfo(item)">
                    <van-col span="8">
                        <div class="listed-name">{{ item.symbolName }}</div>
                        <span class="bg-theme">{{ item.symbol }}</span>
                    </van-col>
                    <van-col span="8" class="tc">
                        <div class="listed-price" :class="item.regularMarketChangePercent >= 0 ? 'color-green': 'color-red' ">
                            {{ item.bid || 0 }}
                        </div>
                    </van-col>
                    <van-col span="8" class="tr">
                        <div class="color-white type-num" :class=" item.regularMarketChangePercent >= 0 ? 'bg-green': 'bg-red' ">
                            <span v-if="item.regularMarketChangePercent >= 0">+</span>
                            <span v-else></span>
                            <span>{{ Number(item.regularMarketChangePercent).toFixed(2) || 0 }} %</span>
                        </div>
                    </van-col>
                </van-row>
            </main>
        </van-list>

    </div>
</template>

<script>
import {index_Qstockservices_sel_api} from "@/assets/js/api";

export default {
    name: "addStock",
    data() {
        return {

            /** 上市 + 上櫃*/
            listed_loading: false,
            listed_finished: false,
            listed_arr: [],
            listed_obj:{
                where:  "",
                page: 1,
            },
            addWordArr:[]
        }
    },
    methods: {
        fnSearch(val){
            this.listed_obj.page= 1;
            this.fnLoadListed();
            if(val){
                this.addWordArr.unshift(this.listed_obj.where);
                this.addWordArr = [...new Set(this.addWordArr)];
                localStorage.setItem('addWordArr',JSON.stringify(this.addWordArr));
            }
        },
        fnRemoveHistory(){
            this.addWordArr = [];
            localStorage.removeItem('addWordArr');
        },
        fnAddStock(text){
            this.listed_obj.where = text;
            this.fnSearch();
        },
        /*詳情页*/
        fnGoMarketInfo (item){
            this.$router.push({
                name:"market_info",
                query:{
                    systexId: item.systexId,
                    symbol: item.symbol,
                    id: item.id,
                }
            })
        },
        /* 上市 + 上櫃列表*/
        fnLoadListed() {
            this.listed_loading = true;
            index_Qstockservices_sel_api({
                where: this.listed_obj.where,
                page: this.listed_obj.page,
            }).then(res => {
                if(res.code == 200){
                    if (this.listed_obj.page == 1) {
                        this.listed_arr = res.data;
                    } else {
                        this.listed_arr = this.listed_arr.concat(res.data)
                    }
                    this.listed_loading = false;
                    this.listed_obj.page++;

                    // 加载状态结束
                    if (res.data.length < 20) {
                        this.listed_finished = true;
                        return
                    }
                }
            })
        },

    },
    created() {
        const searchVal = this.$route.query.searchVal;
        if(searchVal){
            this.addWordArr.unshift(searchVal);
            this.listed_obj.where = searchVal;
        }
        const localVal = localStorage.getItem("addWordArr");
        if(localVal){
            this.addWordArr = JSON.parse(localVal);
        }
       
        this.fnLoadListed();
    },
}
</script>
